<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<!-- #ifdef MP-WEIXIN -->
		<HeadCustom :isBack="false" title="名片夹" ref="HeadCustom" type="index" :headSyle="headSyle"></HeadCustom>
		<!-- #endif -->
		<view class="wrap fboxCol Ycenter" v-if="isLogin" :style="{ height: wrapHeight + 'px' }">
			<view class="head-box" id="head-box">
				<SearchInput :isBtn="false" placeholder="按姓名/电话/公司/职位查找" :keywords.sync="keywords" @del="getInit()" @input="getSearch()" />
				<view class="tabs-box">
					<TabsCustom :list="dataList" :active.sync="navIndex" keyName="groupName" :lineWidth="0" @change="navChange">
						<view slot="right" class="color-6B707C font26 count" v-if="dataList.length">
							共
							<text class="color-E8CDA7 ml10 mr12">
								<template v-if="keywords">
									{{ searchTotal }}
								</template>
								<template v-else>
									{{ navIndex == 0 ? dataList[navIndex] && dataList[navIndex].cardNum + 1 : dataList[navIndex] && dataList[navIndex].cardNum }}
								</template>
							</text>
							张名片
						</view>
					</TabsCustom>
				</view>
			</view>
			<view class="list" id="list">
				<template v-if="dataList.length">
				<scroll-view class="scroll-inner" style="overflow-anchor: auto;" :scroll-top="scrollTop" :scroll-anchoring="true" :scroll-into-view="toView" scroll-y="true" @scroll="scroll" :style="{ height: scrollHeight + 'px' }">
					<view v-if="keywords"><CardItem v-for="(sub, i) in searchList" :key="i" :innerData="sub" :isMine="sub.cardId == userInfo.memberId" /></view>
					<template v-else>
						<view v-for="(item, index) in list" :key="index">
							<view class="hd lh44 font30 color-ACB4C7" :id="item[0]" v-if="item[0]">{{ item[0] }}</view>
							<view class="bd "><CardItem v-for="(sub, i) in item[1]" :key="i" :innerData="sub" :isMine="sub.cardId == userInfo.memberId" /></view>
						</view>
					</template>
				</scroll-view>
				<view class="fixed-index">
					<view class="index font22" v-for="(item, index) in indexList" :key="index" @click="indexTap(item)">
						<template>
							{{ item }}
							<view class="max-index fboxRow Ycenter Xcenter color-141720">{{ item }}</view>
						</template>
					</view>
				</view>
				</template>
			</view>
		</view>
		<view class="bottom-nav-height">
			<BottomTabbar active="card" />
		</view>
		<not-login position="center" ref="notLogin" :show="!isLogin" />
	</view>
</template>

<script>
import { cardGroup, cardGroupSearch } from '@/api/card.js';
import SearchInput from '@/components/search/index.vue';
import CardItem from '@/components/card/card-item.vue';
import TabsCustom from '@/components/head-custom/tabs-custom.vue';
import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue'
export default {
	components: { SearchInput, TabsCustom, CardItem, BottomTabbar },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			keywords: '',
			list: [],
			dataList: [],
			searchList: [],
			indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			navIndex: 0,
			count: 0,
			searchTotal: 0,
			toView: '',
			scrollTop: 0,
			scrollHeight: 0,
			isLogin: false,
			userInfo: {},
			fixedHeight: 0,
			wrapHeight: '100%',
			headSyle: 'background: linear-gradient(360deg, #966844 0%, #B98257 100%);color:#fff'
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: `名片夹`
		});
	},
	onReady() {
		uni.createSelectorQuery(this)
			.selectAll('.head-box,.bottom-nav-height')
			.boundingClientRect(res => {
				uni.getSystemInfo({
					success: sys => {
						const {screenHeight, windowHeight} = sys
						let h = screenHeight
						// #ifdef H5
						res.filter(item=>{
							h = h - item.height
						})
						this.scrollHeight = h-10
						// #endif
						// #ifdef MP
							res.filter(item=>{
								// 微信小程序中有头部，需要删除头部距离
								if(item.id == 'head-box'){ h = h - item.top }
								h = h - item.height
							})
							this.scrollHeight = h-10
						// #endif
					}
				});
			})
			.exec();
			
			console.log('onReady',this.$refs.notLogin)
			const { bw_params, bw_user_temp } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			if (!bw_params.access_token) {
				// #ifdef MP-TOUTIAO
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					});
				// #endif
			}
	},
	onShow() {
		const { bw_params, bw_user_temp } = getApp().getBWData(['bw_params', 'bw_user_temp']);
		if (bw_params.access_token) {
			this.isLogin = true;
			this.getInit();
			this.userInfo = bw_user_temp;
		} else {
			this.isLogin = false;
			// #ifndef MP-TOUTIAO
			this.$nextTick(() => {
				console.log(this.$refs.notLogin)
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				});
			});
			// #endif
		}
	},
	methods: {
		indexTap(index) {
			this.toView = index;
		},
		scroll(e) {
			// this.scrollTop = e.detail.scrollTop;
		},
		getSearch() {
			this.searchList = [];
			cardGroupSearch({
				keyword: this.keywords,
				current: 1,
				size: 5000
			}).then(res => {
				this.searchList = res.data.list;
				this.searchTotal = res.data.total;
				console.log(res);
			});
		},
		getInit() {
			cardGroup().then(res => {
				this.dataList = res.data.groupList;
				this.count = res.data.totalNum;
				this.setList();
			});
		},
		setList() {
			// 重组数据
			const mapList = new Map();
			const memberList = this.dataList[this.navIndex].memberList;
			memberList.filter(item => {
				if (mapList.get(item.realNamePinyinFirst)) {
					const a = mapList.get(item.realNamePinyinFirst);
					a.push(item);
					mapList.set(item.realNamePinyinFirst, a);
				} else {
					mapList.set(item.realNamePinyinFirst, [item]);
				}
			});
			// 重新排序
			console.log(mapList);
			var arrayObj = Array.from(mapList);
			arrayObj.sort(function(s1, s2) {
				const x1 = s1[0] ? s1[0].toUpperCase() : '';
				const x2 = s2[0] ? s2[0].toUpperCase() : '';
				if (x1 < x2) {
					return -1;
				}
				if (x1 > x2) {
					return 1;
				}
				return 0;
			});
			console.log(arrayObj);

			this.list = arrayObj;
		},
		navChange(val) {
			console.log(val);
			this.navIndex = val.index;
			this.setList();
			this.scrollTop = 0;
		}
	}
};
</script>

<style scoped lang="scss">
.page-wrap{height: calc(100vh);overflow-anchor: none;}
.wrap{overflow-anchor: none;}
.list{overflow-anchor: none;}
.head-box{padding: 40rpx 0 0;height: 212rpx; overflow: hidden;}
.bottom-nav-height{ height: calc(100rpx + env(safe-area-inset-bottom));}
.fixed-index {
	padding: 88rpx 0 0;
	position: fixed;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	line-height: 32rpx;
	color: #494c52;
}

.fixed-index .index {
	position: relative;
}

.fixed-index .index:hover .max-index {
	display: flex;
}

.max-index {
	position: absolute;
	right: 20rpx;
	top: -10rpx;
	display: none;
	padding: 0 10rpx 0 0;
	background: url('https://ebc-prod.cdn.benwunet.com/uni-static/card/index.png') no-repeat left center;
	width: 56rpx;
	height: 44rpx;
	background-size: 56rpx 44rpx;
}

.search-input {
	padding: 0 22rpx;
	width: 670rpx;
	height: 72rpx;
	background: rgba(247, 249, 255, 0.0314);
	border-radius: 12rpx;
}

.tabs-box {
	padding: 12rpx 16rpx 0;
	width: 750rpx;
	height: 100rpx;
	border-bottom: 1rpx solid var(--backgroundDivisionColor);
}
.u-tabs2 {
	// width: 692rpx;
}
.count{padding: 0 24rpx;}

.list {
	margin: 0 auto;
	// padding: 20rpx 0 0;
	width: 670rpx;
}
.list .bd{padding: 0 0 24rpx;overflow: hidden;}
</style>
